<template>
  <div class="zy-content">
    <div class="card_box top-content" v-if="listStatus">
          <Row>
            <Col span="8">
              <div class="card_list">
                <div class="content_List">
                  <Row>
                    <Col span="24">
                      <div class="list_item" @click="goList('TODO Projects','My To-do')">
                        <span class="left">{{$t('我的待办')}}</span>
                        <span class="right" >{{projectDatajosn.myTodoMap.myTodoMap || 0}}</span>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </Col>
            <Col span="8">
              <div class="card_list">
                <div class="content_List">
                  <Row>
                    <Col span="24">
                      <div class="list_item" @click="goList('TODO Projects','Handled')">
                        <span class="left">{{$t('我已办理')}}</span>
                        <span class="right" >{{projectDatajosn.myTodoMap.myHandledMap || 0}}</span>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </Col>
            <Col  span="8" style="text-align: center">
              <Button style="margin-top: 88px" size="large" @click="addHandle" v-has="'capex_add'" class="search-btn" type="primary">{{ $t('创建一个新的CapEx项目') }}</Button>
            </Col>
          </Row>
        </div>
    <Row>
      <Col span="24">
        <div class="card_box" v-if="listStatus">
          <Row>
            <Col span="8">
              <div class="card_list">
                <div class="title">
                  <span class="text">{{$t('我创建的项目')}}</span>

                </div>
                <div class="content_List">
                 <Row>
                   <Col span="24">
                     <div class="list_item" @click="goList('My Projects','Total')">
                       <span class="left">{{$t('全部')}}</span>
                       <span class="right" >{{projectDatajosn.myProjects.myProjectsTotal || 0}}</span>
                     </div>
                   </Col>
                   <Col span="24">
                     <div class="list_item" @click="goList('My Projects','Processing')">
                       <span class="left">{{$t('进行中')}}</span>
                       <span class="right" >{{projectDatajosn.myProjects.myProjectsProcessing || 0}}</span>
                     </div>
                   </Col>
                   <Col span="24">
                     <div class="list_item"  @click="goList('My Projects','Completed')">
                       <span class="left">{{$t('已办结')}}</span>
                       <span class="right">{{projectDatajosn.myProjects.myProjectsCompleted || 0}}</span>
                     </div>
                   </Col>
                 </Row>
                </div>
              </div>
            </Col>

            <Col span="8">
              <div class="card_list">
                <div class="title">
                  <span class="text">{{$t('我审批的项目')}}</span>
                </div>
                <div class="content_List">
                  <Row>
                    <Col span="24">
                      <div class="list_item" @click="goList('My Approve Projects','Total')">
                        <span class="left">{{$t('全部')}}</span>
                        <span class="right" >{{projectDatajosn.myApproveProjects.myApproveProjectsTotal || 0}}</span>
                      </div>
                    </Col>
                    <Col span="24">
                      <div class="list_item" @click="goList('My Approve Projects','To be Approve')">
                        <span class="left">{{$t('审批中')}}</span>
                        <span class="right" >{{projectDatajosn.myApproveProjects.myApproveProjectsProcessing || 0}}</span>
                      </div>
                    </Col>
                    <Col span="24">
                      <div class="list_item" @click="goList('My Approve Projects','Approved')">
                        <span class="left">{{$t('已审批')}}</span>
                        <span class="right" >{{projectDatajosn.myApproveProjects.myApproveProjectsCompleted || 0}}</span>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </Col>

            <Col span="8">
              <div class="card_list">
                <div class="title">
                  <span class="text">{{$t('全部的项目')}}</span>
                </div>
                <div class="content_List">
                  <Row>
                    <Col span="24">
                      <div class="list_item" @click="goList('Total Projects','Total')">
                        <span class="left">{{$t('全部')}}</span>
                        <span class="right" >{{projectDatajosn.myTotalProjects.myTotalProjectsTotal || 0}}</span>
                      </div>
                    </Col>
                    <Col span="24">
                      <div class="list_item" @click="goList('Total Projects','Processing')">
                        <span class="left">{{$t('进行中')}}</span>
                        <span class="right" >{{projectDatajosn.myTotalProjects.myTotalProjectsProcessing || 0}}</span>
                      </div>
                    </Col>
                    <Col span="24">
                      <div class="list_item" @click="goList('Total Projects','Completed')">
                        <span class="left">{{$t('已办结')}}</span>
                        <span class="right"  >{{projectDatajosn.myTotalProjects.myTotalProjectsCompleted || 0}}</span>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
// import fileDownload from "js-file-download";

export default {
  name: "Home",
  data(){
  return{
    listStatus:false
  }
  },
  mounted() {
    this.getList()
  },
  methods: {
    goList(projentType,projentStatusType){
      this.$router.push({
        path: '/devBasic/capexList',
       query:{
       projentType,
       projentStatusType
      }
      })
    },
    addHandle() {
      this.$router.push({
        path: '/devBasic/capexOperation',
        query: {
          type: "add"
        }
      })
    },
    getList() {
      this.listStatus = false
      this.axios({
        method: 'post',
        url: '/dms/capex/portalStatistics',
        data:{}
      }).then(res => {
        if (res.code === 200) {
          this.listStatus = true
          this.projectDatajosn = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.card_box{
  background-color: #fff;
  padding: 12px;
  .card_list{
    margin: 0 4px;
    padding: 8px;
    background-color: #e6eaf0;
    //height: 80vh;
    .content_List{
      padding-top: 15px;
      //height: calc(80vh - 32px);
      .list_item{
        width: 100%;
        height: 160px;
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
        .left{
          background-color: #fff;
          color: #333333;
        }
        .right{
          color: rgb(0, 0, 255);
          //background: rgba(254,64,102,.25)
          background-color: #fff;
        }
        .left,.right{
          display: flex;
          height: 100%;
          flex: 1;
          justify-content: center;
          align-items: center;
          font-family: "思源黑体 CN", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 24px;
        }
      }
    }
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 32px;
      .text{
        font-family: "思源黑体 CN Bold", "思源黑体 CN Regular", "思源黑体 CN", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.996);
      }
    }
  }
}
.card_box.top-content{
  margin-bottom: 20px;
  .card_list{
    height: auto;
    .content_List{
      height: auto;
    }
  }
}
</style>
